<template>
  <div>
    <common-map>
      <template slot="header">
        <el-date-picker
          class="date-picker"
          v-model="dateValue"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        />
        <el-select
          v-model="typeValue"
          placeholder="请选择流量类型"
          class="type-picker"
          popper-class="select-popper"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" @click="confirm">搜索</el-button>
      </template>
      <template slot="main">
        <div class="table-wrap">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            :header-row-style="{ background: 'transparent', color: '#ffffff' }"
            :header-cell-style="{ background: 'transparent' }"
            :cell-style="{ background: 'transparent' }"
            :row-style="{ background: 'transparent', color: '#ffffff' }"
          >
            <el-table-column prop="imsi" label="手机卡码"></el-table-column>
            <el-table-column prop="imei" label="手机串码"></el-table-column>
            <el-table-column prop="loc" label="手机归属地"></el-table-column>
            <el-table-column prop="tel" label="电话号码"></el-table-column>
            <el-table-column prop="service" label="运营商"></el-table-column>
            <el-table-column prop="ent" label="卡口"></el-table-column>
            <el-table-column prop="spec" label="是否特定人员"></el-table-column>
            <el-table-column prop="time" label="出现时间"></el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="time-page"
          >
          </el-pagination>
        </div>
      </template>
    </common-map>
  </div>
</template>

<script>
import CommonMap from '@/components/CommonMap/index.vue'
import CommonDataMixin from '@/mixins/commonDataMixin'

export default {
  name: 'index',
  data () {
    return {
      currentPage: 1,
      total: 0,
      limit: 10,
      tableData: []
    }
  },
  components: {
    CommonMap
  },
  mixins: [CommonDataMixin],
  inject: ['getListData'],
  methods: {
    exportMapConfig () {
      if (this.dateValue && this.typeValue != null) {
        const dateValue = this.convertDateToStr(this.dateValue)
        const typeValue = this.typeValue
        const options = {
          startTime: dateValue[0],
          endTime: dateValue[1],
          area: 0,
          data: typeValue,
          page: this.currentPage,
          limit: this.limit
        }
        this.$emit('confirm', options)
      } else {
        this.$message.error('请选择完毕后再进行搜索！')
      }
    },
    confirm () {
      this.exportMapConfig()
    },
    handleSizeChange (val) {
      this.limit = val
      this.exportMapConfig()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.exportMapConfig()
    }
  },
  computed: {
    // 获取中国地图的请求数据
    listData () {
      return this.getListData()
    }
  },
  watch: {
    listData () {
      this.total = this.listData.count
      this.tableData = this.listData.result.map(item => {
        item.time = item.time.replace(/T/, ' ')
        return item
      })
      console.log(this.listData)
    }
  }
}
</script>

<style scoped>
  .table-wrap {
    text-align: center;
  }

  .time-page {
    margin: 2rem 0;
  }

</style>
